<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      #gy {
        color: green;
      }

      .a {
        color: yellow;
      }

      input[type="text"],
      body > p {
        background-color: red;
      }

      body > div > div > p {
        color: pink;
      }

      body > div > div p {
        background-color: yellow;
      }

      a:link {
        color: green;
      }

      a:visited {
        color: red;
      }

      a:hover {
        color: yellow;
      }

      a:active {
        color: pink;
      }
    </style>
  </head>

  <body>
    <ul>
      <li id="gy">刘备</li>
      <li>关羽</li>
      <li class="a">张飞</li>
    </ul>
    <p>香蕉</p>
    <p class="a">苹果</p>
    <input type="text" placeholder="用户名" />
    <input type="password" placeholder="密码" />
    <div>
      <p>p1</p>
      <div>
        <p>p2</p>
      </div>
      <div>
        <div>
          <p>p3</p>
        </div>
      </div>
    </div>
    <a href="http://www.bing.com">必应搜索</a>
  </body>
</html>
